import { useEffect, useRef } from 'react';
import { BasicTarget, getTargetElement } from '../utils/dom';

const defaultEvent = 'click'

type EventType = MouseEvent | TouchEvent

export default (
    onClickAway: (event: EventType) => void,
    target: BasicTarget | BasicTarget[],
    eventName: string = defaultEvent,
) => {
    const onClickAwayRef = useRef(onClickAway)
    onClickAwayRef.current = onClickAway

    const targetRef = useRef(target)
    targetRef.current = target

    useEffect(() => {
        const handler = (event: any) => {
            const targets = Array.isArray(targetRef.current) ? targetRef.current : [targetRef.current]
            if (targets.some((targetItem) => {
                const targetElement = getTargetElement(targetItem) as HTMLElement;
                return !targetElement || targetElement?.contains(event.target);
            })) {
                return
            }
            onClickAwayRef.current(event)
        }
        document.addEventListener(eventName, handler)
        return () => {
            document.removeEventListener(eventName, handler)
        }
    }, [eventName])
}